<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/styles.css"> <!-- 修改为Spring Boot静态资源路径 -->
    <title>医院预约挂号系统</title>
    <style>
        /* 基础样式补充 */
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #doctor-ul {
            list-style-type: none;
            padding: 0;
        }
        .doctor-item {
            padding: 10px;
            border: 1px solid #ddd;
            margin-bottom: 5px;
            cursor: pointer;
        }
        .doctor-item:hover {
            background-color: #f5f5f5;
        }
        .selected {
            background-color: #d4edda;
        }
        #patient-form, #appointment-time {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 5px;
        }
        input, button {
            margin: 5px 0;
            padding: 8px;
        }
        button {
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }
        button:hover {
            background-color: #0069d9;
        }
    </style>
</head>

<body>
<h1>医院预约挂号系统</h1>

<!-- 系统状态提示 -->
<div id="status-message" style="color: green; margin: 10px 0;"></div>

<!-- 显示医生列表 -->
<div id="doctor-list">
    <h2>医生列表</h2>
    <ul id="doctor-ul">
        <!-- 将通过JavaScript动态加载 -->
    </ul>
</div>

<!-- 显示患者信息输入区域 -->
<div id="patient-info">
    <h2>患者信息</h2>
    <form id="patient-form">
        <label for="patient-name">姓名:</label>
        <input type="text" id="patient-name" required><br>
        <label for="patient-email">邮箱:</label>
        <input type="email" id="patient-email" required><br>
        <label for="patient-phone">电话:</label>
        <input type="text" id="patient-phone" required><br>
        <input type="submit" value="提交患者信息">
    </form>
</div>

<!-- 显示预约时间选择区域 -->
<div id="appointment-time" style="display: none;"> <!-- 默认隐藏 -->
    <h2>选择预约时间</h2>
    <input type="datetime-local" id="appointment-datetime" required>
    <button id="book-appointment">确认预约</button>
</div>

<!-- 预约结果显示 -->
<div id="appointment-result" style="margin-top: 20px; display: none;">
    <h3>预约成功</h3>
    <p>预约ID: <span id="appointment-id"></span></p>
    <p>医生: <span id="appointment-doctor"></span></p>
    <p>患者: <span id="appointment-patient"></span></p>
    <p>时间: <span id="appointment-time-display"></span></p>
</div>

<script>
    // 全局变量存储当前选择的医生和患者ID
    let currentDoctorId = null;
    let currentPatientId = null;

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 加载医生列表
        loadDoctors();

        // 2. 患者表单提交处理
        document.getElementById('patient-form').addEventListener('submit', function(e) {
            e.preventDefault();
            registerPatient();
        });

        // 3. 预约按钮点击处理
        document.getElementById('book-appointment').addEventListener('click', bookAppointment);
    });

    // 从后端获取医生列表
    async function loadDoctors() {
        try {
            const response = await fetch('/api/doctors');
            const doctors = await response.json();

            const doctorList = document.getElementById('doctor-ul');
            doctorList.innerHTML = '';

            doctors.forEach(doctor => {
                const li = document.createElement('li');
                li.className = 'doctor-item';
                li.innerHTML = `
                    <strong>${doctor.name}</strong> - ${doctor.specialty}
                    <input type="hidden" value="${doctor.id}">
                `;
                li.addEventListener('click', function() {
                    // 移除之前选中的样式
                    document.querySelectorAll('.doctor-item').forEach(item => {
                        item.classList.remove('selected');
                    });
                    // 添加当前选中样式
                    this.classList.add('selected');
                    // 保存当前选择的医生ID
                    currentDoctorId = doctor.id;
                    // 显示时间选择区域
                    document.getElementById('appointment-time').style.display = 'block';
                });
                doctorList.appendChild(li);
            });

        } catch (error) {
            showStatus('加载医生列表失败: ' + error.message, 'error');
        }
    }

    // 注册患者信息
    async function registerPatient() {
        const name = document.getElementById('patient-name').value;
        const email = document.getElementById('patient-email').value;
        const phone = document.getElementById('patient-phone').value;

        try {
            const response = await fetch('/api/patients', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: name,
                    email: email,
                    phone: phone
                })
            });

            const result = await response.json();
            currentPatientId = result.id;
            showStatus('患者信息提交成功！', 'success');

        } catch (error) {
            showStatus('患者注册失败: ' + error.message, 'error');
        }
    }

    // 预约挂号
    async function bookAppointment() {
        if (!currentDoctorId || !currentPatientId) {
            showStatus('请先选择医生并填写患者信息', 'error');
            return;
        }

        const datetime = document.getElementById('appointment-datetime').value;
        if (!datetime) {
            showStatus('请选择预约时间', 'error');
            return;
        }

        try {
            const response = await fetch('/api/appointments', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    doctorId: currentDoctorId,
                    patientId: currentPatientId,
                    dateTime: datetime
                })
            });

            const appointment = await response.json();

            // 显示预约结果
            document.getElementById('appointment-id').textContent = appointment.id;
            document.getElementById('appointment-doctor').textContent =
                document.querySelector('.selected strong').textContent;
            document.getElementById('appointment-patient').textContent =
                document.getElementById('patient-name').value;
            document.getElementById('appointment-time-display').textContent =
                new Date(appointment.dateTime).toLocaleString();

            document.getElementById('appointment-result').style.display = 'block';
            showStatus('预约成功！', 'success');

        } catch (error) {
            showStatus('预约失败: ' + error.message, 'error');
        }
    }

    // 显示状态消息
    function showStatus(message, type) {
        const statusDiv = document.getElementById('status-message');
        statusDiv.textContent = message;
        statusDiv.style.color = type === 'error' ? 'red' : 'green';

        // 3秒后自动消失
        setTimeout(() => {
            statusDiv.textContent = '';
        }, 3000);
    }
</script>
</body>
</html>